<template>
  <div class="ly-box">
    <div class="tips" style="color: #ff5061; line-height: 40px;text-align: center;">{{tips}}</div>
    <yd-cell-group title="小区信息">
      <yd-cell-item v-show="groupShow">
        <span slot="left">组团：</span>
        <select slot="right" @change="getBuilding(group)" v-model="group">
          <option value="">请选择组团</option>
          <option :key="index" v-for="(group,index) in groupList" :value="group.label">{{group.label}}</option>
        </select>
      </yd-cell-item>
      <yd-cell-item v-show="buildShow">
        <span slot="left">楼栋：</span>
        <select slot="right" @change="getUnit(building)" v-model="building">
          <option value="">请选择楼栋</option>
          <option :key="index" v-for="(building,index) in buildingList" :value="building.label">{{building.label}}
          </option>
        </select>
      </yd-cell-item>
      <yd-cell-item v-show="unitShow">
        <span slot="left">单元：</span>
        <select slot="right" @change="getRoom(unit)" v-model="unit">
          <option value="">请选择单元</option>
          <option :key="index" v-for="(unit,index) in unitList" :value="unit.label">{{unit.label}}</option>
        </select>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left">房间号：</span>
        <select slot="right" v-model="room" @change="getUser(room)">
          <option value="">请选择房间</option>
          <option :key="index" v-for="(room,index) in roomList" :value="room.label">{{room.label}}</option>
        </select>
      </yd-cell-item>
      <!--<yd-cell-item>-->
      <!--<span slot="left">面积：</span>-->
      <!--<yd-input slot="right" v-model="areaX" readonly placeholder="面积"></yd-input>-->
      <!--</yd-cell-item>-->
    </yd-cell-group>

    <yd-cell-group title="业主成员" v-show="isCheck==1">

      <yd-cell-item>
        <span slot="left">请选择业主：</span>
        <select slot="right" v-model="user" @change="changePhone(user)">
          <option value="">请选择业主</option>
          <option :key="index" v-for="(item,index) in ownersList" :value="item.id">{{item.name}}</option>
        </select>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left">手机号：</span>
        <select slot="right" v-model="phone">
          <option value="">请选择手机号码</option>
          <option :key="index" v-for="(item,index) in phoneList" :value="item">{{item}}</option>
        </select>
        <!--<yd-input slot="right" v-model="phone" ref="phone" placeholder="手机号码"></yd-input>-->
      </yd-cell-item>


      <yd-cell-item>
        <span slot="left">手机号码：</span>
        <yd-input slot="right" regex="mobile" ref="cellPhone" v-model="cellPhone"
                  placeholder="请完整输入上面所选手机号码"></yd-input>
      </yd-cell-item>


      <yd-cell-item>
        <span slot="left">验证码：</span>
        <yd-input slot="right" v-model="code" placeholder="验证码"></yd-input>
        <yd-sendcode slot="right"
                     v-model="start"
                     @click.native="sendCode"
                     type="warning"
                     storage-key="codeky"
        ></yd-sendcode>
      </yd-cell-item>
    </yd-cell-group>

    <yd-button size="large" type="primary" class="tjfj-btn" @click.native="suerAddRoom">提交</yd-button>
  </div>
</template>

<script>
  import http from "../../http";
  import storage from "../../store/storage.js";

  export default {
    data() {
      return {
        name: '',
        housing: '',
        group: '',
        groupList: [],
        building: '',
        buildingList: [],
        unit: '',
        unitList: [],
        room: '',
        roomList: [],
        user: '',
        ownersList: [],
        typeInt: '1',
        roomId: '',
        areaX: '',
        ownersId: '',
        groupShow: true,
        buildShow: true,
        unitShow: true,
        roomShow: true,
        isCheck: 0,
        start: false,
        phone: '',
        cellPhone: '',
        phoneList: [],
        code: '',
        tips: '',
      };
    },
    created: function () {
      //判断小区是否需要认证
      if (storage.get('house-id')) {
        this.housing = storage.get('house-id')
      }
      console.log(storage.getObj("housingId"))
      if (storage.getObj("housingId")) {
        this.housing = storage.getObj("housingId").id
      }
      console.log(this.housing)
      this.check();
      this.getGroup();
    },
    methods: {

      check: function () {
        // ?housingId=58

        http.get("/communityApps/personalCenter/housing/auth?housingId=" + this.housing).then(res => {


          // isCheck = 0;不认证 1短信认证

          if (res.data.code == 20000) {
            this.isCheck = res.data.data;
          } else {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1500
            });
          }
        });
      },

      sendCode: function () {

        const cellPhone = this.$refs.cellPhone
        let isphoen = cellPhone.valid;

        //判断电话号码不为空
        if (this.cellPhone == "") {
          this.$dialog.toast({
            mes: "手机号码不能为空",
            timeout: 800
          });
        } else {
          if (isphoen) {
            if (this.user == "") {
              this.$dialog.toast({
                mes: "请先选择业主",
                timeout: 800
              });
            } else {
              const body = {
                ownerId: this.user,
                cellPhone: this.cellPhone
              };
              http.get("/communityApps/personalCenter/verify", body).then(res => {
                if (res.data.code == 20000) {
                  this.start = true;
                  this.$dialog.toast({
                    mes: '已发送',
                    icon: 'success',
                    timeout: 800
                  });
                } else {
                  this.$dialog.toast({
                    mes: res.data.message,
                    timeout: 1500
                  });
                }
              });
            }
          } else {
            this.$dialog.toast({
              mes: "请先完整输入上面所选手机号码",
              timeout: 800
            });
          }

        }


      },


      //根据首页默认小区加载组团
      getGroup: function () {
        // this.name = storage.getObj("housingId").name;
        // if (storage.getObj("housingId")) {
        //   this.housing = storage.getObj("housingId").id;
        //   this.building = '';
        //   this.buildingList = [];
        //   this.unit = '';
        //   this.unitList = [];
        //   this.room = '';
        //   this.roomList = [];
        //   this.user = '';
        //   this.ownersList = [];
        //   this.phone = "";
        //   this.cellPhone = "";
        //   this.phoneList = [];
        //   this.roomId = "";
        //   this.areaX = '';
          const params = {
            housingId: this.housing,
          };
          http.post("/communityApps/propertyPay/getGroupName", params).then(res => {
            if (res.data.code == 20000) {
              // 如果没有组团加载楼栋
              if (res.data.data.groupList == null) {
                this.buildingList = res.data.data.buildList;
                this.groupShow = false;
                // 如果没有楼栋加载单元
                if (res.data.data.buildList == null) {
                  this.unitList = res.data.data.unitList;
                  this.buildShow = false;
                  //  如果没有单元加载房间
                  if (res.data.data.unitList == null) {
                    this.unitShow = false;
                    this.roomList = res.data.data.roomList;
                  }
                }
              } else {
                this.groupList = res.data.data.groupList;
              }
            } else {
              this.$dialog.toast({
                mes: res.data.message,
                timeout: 1500
              });
            }
          });
        // } else {
        //   this.$dialog.toast({
        //     mes: "暂无小区",
        //     timeout: 1500
        //   });
        // }

      },
      //根据组团加载楼栋
      getBuilding: function (group) {
        this.unit = '';
        this.unitList = [];
        this.room = '';
        this.roomList = [];
        this.user = '';
        this.ownersList = [];
        this.phone = "";
        this.phoneList = [];
        this.cellPhone = "";
        this.roomId = "";
        this.areaX = '';
        const params = {
          housingId: this.housing,
          groupName: group,
        };
        http.post("/communityApps/propertyPay/getBuilding", params).then(res => {
          if (res.data.code == 20000) {
            if (res.data.data.buildList == null) {
              this.unitList = res.data.data.unitList;
              this.buildShow = false;
              //  如果没有单元加载房间
              if (res.data.data.unitList == null) {
                this.roomList = res.data.data.roomList;
              }
            } else {
              this.buildingList = res.data.data.buildList;
            }

          } else {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1500
            });
          }
        });
      },
      //  根据楼栋加载单元
      getUnit: function (building) {
        this.unit = '';
        this.unitList = [];
        this.room = '';
        this.roomList = [];
        this.user = '';
        this.ownersList = [];
        this.phone = "";
        this.cellPhone = "";
        this.phoneList = [];
        this.roomId = "";
        this.areaX = '';
        const params = {
          housingId: this.housing,
          groupName: this.group,
          building: building,
        };
        http.post("/communityApps/propertyPay/getUnit", params).then(res => {
          if (res.data.code == 20000) {
            //  如果没有单元加载房间
            if (res.data.data.unitList == null) {
              this.roomList = res.data.data.roomList;
              this.unitShow = false;
            } else {
              this.unitList = res.data.data.unitList;
            }
          } else {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1500
            });
          }
        });
      },
      //  根据单元加载房间号
      getRoom: function (unit) {
        this.user = '';
        this.ownersList = [];
        this.phone = "";
        this.cellPhone = "";
        this.phoneList = [];
        this.areaX = '';
        this.roomId = "";
        const params = {
          housingId: this.housing,
          groupName: this.group,
          building: this.building,
          unit: unit,
        };
        http.post("/communityApps/propertyPay/getRoom", params).then(res => {
          if (res.data.code == 20000) {
            this.roomList = res.data.data.roomList;
          } else {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1500
            });
          }
        });
      },
      // 根据房间号加载用户
      getUser: function (room) {
        const params = {
          housingId: this.housing,
          groupName: this.group,
          building: this.building,
          unit: this.unit,
          room: room,
        };
        http.post("/communityApps/personalCenter/owner/info", params).then(res => {
          if (res.data.code == 20000) {
            if (res.data.data.owners.length <= 0) {
              this.$dialog.toast({
                mes: "请先到物业处绑定房间！",
                timeout: 1500
              });
              this.tips = '请先到物业处绑定房间!';
              this.user="";
              this.ownersList = [];
              this.phone="";
              this.phoneList=[];
              this.cellPhone="";
            } else {
              this.tips = '';
              this.ownersList = res.data.data.owners;
              this.user = res.data.data.owners[0].id;
              this.roomId = res.data.data.roomId;
              if (this.isCheck == 0) {
                return
              }
              this.changePhone(res.data.data.owners[0].id);
            }
          } else {
            this.user="";
            this.ownersList = [];
            this.phone="";
            this.phoneList=[];
            this.cellPhone="";
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1500
            });
          }
        });
      },

      //根据选着的业主加载手机号码
      changePhone: function (user) {
        http.get("/communityApps/personalCenter/owner/phone?ownerId=" + user).then(res => {
          if (res.data.code == 20000) {
            if (res.data.data.length <= 0) {
              this.$dialog.toast({
                mes: "请先到物业处绑定房间！",
                timeout: 1500
              });
              this.tips = "请先到物业处绑定房间!"

              this.phone="";
              this.phoneList=[];
              this.cellPhone="";
            } else {
              this.phoneList = res.data.data;
              this.phone = res.data.data[0];
              // this.cellPhone = res.data.data[0];
            }
          } else {
            this.phone="";
            this.phoneList=[];
            this.cellPhone="";
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1500
            });
          }
        });

      },
      suerAddRoom: function () {
        const params = {
          housingId: this.housing,
          roomId: this.roomId,
          ownerId: this.user,
          verifyCode: this.code,
          cellPhone: this.cellPhone,
        };
        if (this.roomId == "") {
          this.$dialog.toast({
            mes: "请先选择需要绑定的房间",
            timeout: 800,
          });
        } else {
          console.log(params);
          http.post("/communityApps/personalCenter/rooms", params).then(res => {
            if (res.data.code == 20000) {
              this.$dialog.toast({
                mes: "绑定成功",
                timeout: 500,
                callback: () => {
                  this.$router.go(-1);
                  // this.$router.push("/user/roomList");
                }
              });
            } else {
              this.$dialog.toast({
                mes: res.data.message,
                timeout: 1500
              });
            }
          });
        }

      }
    }
  };
</script>

<style>
  .ly-box .yd-cell-right select {
    color: #555;
  }

</style>

<style scoped lang="scss">
  .tjfj-btn {
    width: 86%;
    margin: 0.5rem auto 0;
  }
</style>
